<template>
  <section class="w-full h-screen flex justify-center items-center">
    <main>
      <h2 class="text-2xl md:text-4xl mb-4">Hello~</h2>
      <p class="text-md md:text-2xl leading-relaxed md:leading-relaxed">
        我叫孙颖洲，计算机专业毕业，从事前端开发工作3年。坐标郑州，性格内向，擅长面向搜索引擎编程，喜欢接触和学习新技术，主要技术栈为Vue
        和 Uniapp。
      </p>
    </main>
  </section>
</template>

<style lang="scss" scoped>
section {
  position: relative;

  &::before,
  &::after {
    width: 100%;
    height: 100%;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
  }

  &::before {
    z-index: -1;
    background: rgba(0, 0, 0, 0.6);
  }

  &::after {
    z-index: -2;
    background: url('../assets/imgs/code.jpg') center / cover;
  }

  main {
    position: relative;
    z-index: 9;
    color: #fff;
    width: min(72vw, 768px);

    p {
      letter-spacing: 0.2rem;
      text-indent: 2em;
    }
  }
}
</style>
